<!-- Online -->
<div class="online-courses">
  <div class="heading-line">
    <h2><span>Online Courses</span></h2>
  </div>

  {% comment %}
  We're going to follow the next ordering for the online courses:
    1- First we'll show those items that belong to an specific specialization (i.e.: Scala's progfun in Coursera). Those will be ordered alphabetically by title and each item under the specialization by the `specialization-order` tag in each one.
    2- After those, courses that don't belong to any specific specialization.
  We'll only show those courses that are not finished yet.
  {% endcomment %}

  {% assign specializations = '' | split: ',' %}
  {% assign courses = '' | split: ',' %}
  {% assign upcomingCourses = '' | split: ',' %}
  {% capture now %}{{site.time | date: '%s' | plus: 0}}{% endcapture %}

  {% for course in site.online_courses %}
    {% unless specializations contains course.specialization %}
      {% assign specializations = specializations | push: course.specialization %}
    {% endunless %}


      {% assign upcomingCourses = upcomingCourses | push: course %}
  {% endfor %}

  {% for specialization in specializations %}
    {% assign specCourses = '' | split: ',' %}

    {% for course in upcomingCourses %}
      {% if course.specialization %}
        {% if course.specialization == specialization %}
          {% assign specCourses = specCourses | push: course %}
        {% endif %}

        {% assign sortedSpecCourses = specCourses | sort: 'specialization-order' %}
      {% endif %}
    {% endfor %}
    {% for sortedCourse in sortedSpecCourses %}
      {% assign courses = courses | push: sortedCourse %}
    {% endfor %}
  {% endfor %}


  {% for course in upcomingCourses %}

    {% unless course.specialization %}
      {% assign courses = courses | push: course %}
    {% endunless %}
  {% endfor %}


  <div class="course-items-list">
    {% for course in courses %}
      <div class="course-item card">
        <div class="card-text">
          <h4>
            {% if course.coursera-page %}
              <a href="{{course.coursera-page}}">
                <img src="/resources/img/frontpage/coursera-icon.png" alt="">
              </a>
            {% endif %}
            {% if course.openedx-page %}
              <a href="{{course.openedx-page}}">
                <img src="/resources/img/frontpage/edx-icon.png" alt="">
              </a>
            {% endif %}
              {{course.title}}
          </h4>
          <div>
            <ul>
              <li class="online-courses-price">
                {% if course.paid == true %}
                  {{site.data.common.texts.onlineCoursesPaid}}
                {% else %}
                  {{site.data.common.texts.onlineCoursesFree}}
                {% endif %}
              </li>
              <li class="dot">•</li>
              <li class="online-courses-date">
                {% if course.showDate == true %}
                  {{course.date | date_to_string}}
                {% else %}
                  {{site.data.common.texts.courseraLaunchPeriod}}
                {% endif %}
              </li>
            </ul>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="call-to-action action-medium">
  </div>
</div>
